import React from 'react';
import styles from './index.module.scss';
import Typography from '../../typography';
import IconImg from '../../../assets/icon';
import RecommentImg from '../../../assets/result-page-img/recomment';
import StarImg from '../../../assets/star';
import { nanoid } from 'nanoid';

const { Header } = Typography;

const RecommentHead = ({ children, type, content, img, color, star }) => {
  return (
    <div className={styles.recommentHead}>
      <img src={IconImg[img]} alt="" className={styles.icon} />
      <div className={styles.main}>
        <Header type="iconTitle">{children}</Header>
        <div className={styles.bottom}>
          <Header type="recommentLevelTitle">推荐程度</Header>
          {/* 由color来决定显示什么颜色的星星 显示几个从数据中读取 */}
          <div className={styles.starWrap}>
            {new Array(star).fill(0).map(() => {
              return (
                <img
                  src={StarImg[color]}
                  className={styles.star}
                  alt=""
                  key={nanoid()}
                />
              );
            })}
          </div>
        </div>
      </div>
      {color !== 'Multi' && (
        <div className={styles.recommentImg}>
          <img src={RecommentImg[color]} alt="" />
          <div className={styles.recomnentContext}>{content}</div>
        </div>
      )}
    </div>
  );
};

export default RecommentHead;
